<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加段子</title>

<style>
	body,div,input,label,h1,ul,li{margin: 0; padding: 0;}
	body, button, input, select, textarea {font: 12px "微软雅黑",arial,sans-serif;color:#2e2e2e;}
	table {border-collapse:collapse;border-spacing:0;}
	fieldset,img {border:0}
	address,caption,cite,code,dfn,strong,th,var{font-style:normal;font-weight:normal}
	ol,ul {list-style:none}
	caption,th {text-align:left}
	h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
	q:before,q:after {content:''}
	abbr,acronym { border:0}
	a{text-decoration:none;color:#999;outline:none;hide-focus:expression(this.hideFocus=true);}
	em{font-style:normal;}
	input,a,textarea{ outline:none;}
	a:hover{ text-decoration:underline;}
	html,body{width:100%;height:100%;}
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
	.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
	.fl{float:left;_display:inline}
	.p20{ padding: 20px;}.pt15{padding-top: 15px;}.pl20{padding-left: 20px;}.pb10{padding-bottom: 10px;}
	.m20{margin-left: 10px;}.ml10{margin-left:10px;}.mt20{margin-top:20px;}
	.pr{position: relative;}
	.h1-title{ font-size: 24px; line-height: 50px; font-weight: normal;}
	.sdklist-info li{ clear: both; overflow: hidden; padding:10px 0;}
	label.lab-left{ width: 100px; line-height: 26px; font-size: 12px;}
	input[type="text"]{ line-height: 26px; width: 260px; border: 1px solid #ccc;}
	textarea{ width: 560px; resize:none; height: 120px; line-height: 24px; overflow: auto; border: 1px solid #ccc;}
	input[type="checkbox"]+label{ position: relative; top: -2px; padding-left: 5px;}
	.save-btn{ background: #49c39d; border-radius: 5px; font-size: 18px; padding: 10px 60px; color: #FFF;}
	.save-btn:hover{ background: #6ce6c0; text-decoration: none;}
	select{ line-height: 26px; height: 26px; width: 120px;}
	.input-file{ position: absolute; left:0; left: 0px;opacity:0; filter:alpha(opacity=0); line-height: 28px; height:28px; width:230px; cursor:pointer;}
	.browse-btn{line-height: 28px;padding: 0 15px; background: #808080; color: #FFF;text-align: center; height:28px;}
	.upload-btn{ line-height: 28px;padding: 0 15px; background: #49c39d; color: #FFF;text-align: center; border:0; cursor:pointer;height:28px;}
	a:hover{text-decoration: none;}
	input[type="text"].textfield{width: 174px;}
	fieldset{border:1px solid #a6c9e2; margin-top:10px;}
	fieldset p{ text-indent:2em;line-height:22px; margin:0; padding:0;}
	.filedset-pad{padding:0 5px;}
	.img-con{text-align:center;}
	.img-con img{ padding-bottom:10px; max-width:450px !important; width:auto;}
	.btn-blue{line-height:28px;padding:0 15px; color:#FFF; background:#298BB8;}
	.high{ color:red; } 
	.select_border{height:27px;*background:#fff;background:#fff;*border:1px solid #FFFFFF;*padding:4px;*height:16px;}
	.container{*border:0;*position:relative;*height:18px;*overflow:hidden;}
	.select{border:1px solid #ccc;padding:1px 3px;font-size:12px;height:29px;margin:-1px; position: relative; *top: -9px;}
	.img-box{ border:1px solid #999; width:auto; height:auto; margin:30px 0 0 0;}
 	.img-box img{ width:100%;}
</style>

<script>
function fileUpload(){
	var file = document.getElementById("img_file_id").value; 
	if(file==undefined || file== ''){
		Ext.example.msg('', '请选择需要上传的图片！', '');
		return false;
	}else if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ 
		Ext.example.msg('', '图片类型必须是.gif,jpeg,jpg,png中的一种', '');
		return false;
	}else{ 
		$.ajaxFileUpload({  
       		url : './dp/upload',// servlet请求路径  
        	secureuri : false,  
        	fileElementId : 'img_file_id',// 上传控件的id  
        	dataType : 'json',  
        	data : {}, // 其它请求参数  
        	success : function(data, status) {  
            	if(data.msg) {  
            		$("#img-box").show();
                	$("#img_url_id").attr("src","<%=basePath%>upload/"+data.msg);
                	$("#add_iconUrl").val("<%=basePath%>upload/"+data.msg);
            	}  
        	},  
        	error : function(data, status, e) {  
            	Ext.example.msg('', '上传出错！', '');
        	}  
    	})  

    	return false; 
	}   
}

//校验
function validateSave(){
	var menuId = $("#addMenuId").val();
	var menuCode = $("#addMenuId").find("option:selected").attr("menucode");
	var answer = $("#answer").val();
	if(menuId == null || menuId == '' || menuId == 0){
		Ext.example.msg('', '请选择菜单', '');
		return false;
	}else if(menuCode == 'naojing' && (answer == null || answer == '')){
		Ext.example.msg('', '请填写答案', '');
		return false;
	}
	// 内容
 	var content = $("#addContent").val();
	if(content == null || content == ''){
		Ext.example.msg('', '内容不能为空', '');
		return false;
	} else if(content.length > 2500){
		Ext.example.msg('', '内容不能大于2500个字符', '');
		return false;
	} 
	return true;
}

function changeMenu(){
	var menuCode = $("#addMenuId").find("option:selected").attr("menucode");
	if(menuCode == 'naojing'){
		$("#answerDiv").show();
	}else{
		$("#answerDiv").hide();
	}
}

Ext.onReady(function(){
	$("#img-box").hide();
});
</script>

</head>
<body>
<form id="add_info_form" method="post" class="form" action=""  enctype="multipart/form-data" target="apkIframe">
	<div class="filedset-pad">
		<fieldset>
    	<legend>段子内容</legend>
    	<ul class="sdklist-info">
    		<li>
				<label class="fl">菜单：</label>
				<select id="addMenuId" name="menuId" style="width:130px;" onchange="changeMenu()">
					<c:forEach items="${menuList}" var="menu">
						<option value="${menu.id}" menucode="${menu.menuCode}">${menu.menuName}</option>
					</c:forEach>
				</select>
			</li>
    		<li>
				<label class="fl">内容：</label>
				<textarea id="addContent" name="content" maxlength="2500" style="width:400px;"></textarea>
				<div class="fl" id="answerDiv" style="display:none">
					<label class="fl">答案：</label>
					<input type="text" class="fl" id="answer" name="answer" style="width:400px;">
				</div>
			</li>
			<li>
				<label class="fl">图片：</label> 
				<div class="pr fl">
					<input type="text" class="fl" id="add_iconUrl" name="minImageUrl" value="">
					<input id="img_file_id" class="fl input-file"  type="file" name="fileselect" onchange="return fileUpload()"/>
					<a href="javascript:;" class="browse-btn fl" onclick="">浏览</a>
				</div>
				<div class="cl"></div>
				<div class="img-box" id="img-box">
			 		<img id="img_url_id" alt="" src="" >	
				</div>
			</li>
    	</ul>
    	</fieldset>
	</div>
</form>

</body>

</html>
